<template>
  <div class="home">
    <Row style="height: 100%" :gutter="10" v-if="refresh">
      <!-- 产量 -->
      <Col :span="7" class="content-item">
        <div class="left-item" v-for="item in Object.keys(productData)" :key="item">
          <p class="head-title">{{ productData[item].language[G_Locale].headTitle }}</p>
          <starLine
            v-if="!!productData[item].data"
            class="line-content"
            :language="productData[item].language"
            :data="productData[item].data"
            :config="lineConfig"
          ></starLine>
          <noData v-else></noData>
        </div>
      </Col>
      <!-- 订单 -->
      <Col :span="10" class="content-item">
        <div class="middle-item middle-top">当前班组班次：{{ currentTeam }}</div>
        <div class="middle-item middle-center">
          <p class="head-title">{{ orderLang[G_Locale].headTitle }}</p>
          <template v-if="!!orderData">
            <starPie
              class="order-chart"
              :language="orderLang"
              :data="orderPieData"
              :config="pieConfig"
            ></starPie>
            <starLine
              class="order-chart"
              :language="orderLang"
              :data="orderData"
              :config="orderBarConfig"
            ></starLine>
          </template>
          <noData v-else></noData>
        </div>
      </Col>
      <!-- 质检 -->
      <Col :span="7" class="content-item">
        <div class="right-item" v-for="item in Object.keys(qualityData)" :key="item">
          <p class="head-title">{{ qualityData[item].language[G_Locale].headTitle }}</p>
          <starLine
            v-if="!!qualityData[item].data"
            class="line-content"
            :language="qualityData[item].language"
            :data="qualityData[item].data"
            :config="barConfig"
          ></starLine>
          <noData v-else></noData>
        </div>
        <div class="right-item">
          <p class="head-title">当日设备运行分析</p>
          <equip
            class="line-content"
            :data="equipData"
            v-if="!!equipData && equipData.length > 0"
          ></equip>
          <noData v-else></noData>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import starLine from "public/components/charts/starLine";
import starPie from "public/components/charts/starPie";
import equip from "./components/equip.vue";
import noData from "./components/noData.vue";
export default {
  components: { starLine, starPie, equip, noData },
  data() {
    return {
      isMenuCollapsed: false,
      refresh: true,
      productData: {
        year:{
          language: {
            "en-US": {
              headTitle: "annual production trend",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "batch",
            },
            "zh-CN": {
              headTitle: "全年产量趋势",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "重量(kg)",
            },
          },
          data: null,
        },
        month:{
          language: {
            "en-US": {
              headTitle: "current month's production trend",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "batch",
            },
            "zh-CN": {
              headTitle: "当月产量趋势",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "重量(kg)",
            },
          },
          data: null,
        },
        day:{
          language: {
            "en-US": {
              headTitle: "current day's production trend",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "batch",
            },
            "zh-CN": {
              headTitle: "当天产量趋势",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "重量(kg)",
            },
          },
          data: null,
        }
      },
      currentTeam: "",
      //订单
      orderLang: {
        "en-US": {
          headTitle: "user order analysis for this month",
          title: "",
        },
        "zh-CN": {
          headTitle: "本月用户订单分析",
          title: "",
        },
      },
      orderData:null,
      orderPieData:null,
      qualityData:{
        w:{
          language: {
            "en-US": {
              headTitle: "quality inspection and analysis of tungsten powder",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "batch",
            },
            "zh-CN": {
              headTitle: "钨粉质量检测分析",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "批",
            },
          },
          data: null,
        },
        cw:{
          language: {
            "en-US": {
              headTitle: "quality inspection and analysis of tungsten carbide",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "batch",
            },
            "zh-CN": {
              headTitle: "碳化钨质量检测分析",
              title: "",
              xAxisTitle: "",
              yAxisTitle: "批",
            },
          },
          data: null,
        }
      },
      equipData: [],
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        grid: {
          bottom: 40,
        },
      },
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        legend: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      orderBarConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        legend: true,
        color:[{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#56e2ff' // 0% 处的颜色
            }, {
                offset: 1, color: '#6da5fc' // 100% 处的颜色
            }]
          },{
          type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#9997fb' // 0% 处的颜色
            }, {
                offset: 1, color: '#5956c6' // 100% 处的颜色
            }],
          }],
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      pieConfig: {
        toolbox: false,
        legend: true,
        radius: ["20%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        label: true,
        labelLine: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      this.getProduction();
      this.getTeam();
      this.getOrder();
      this.getQuality();
      this.getEquipData();
    },
    //获取产量数据
    getProduction(){
      this.$api.Custom.getProduction().then(res=>{
        Object.keys(res).map(key=>{
          let currentData = res[key];
          if(!currentData){
            this.productData[key].data = null;
            return;
          }
          this.productData[key].data = {
            categories:currentData.categories,
            values:this.transValues(currentData.values)
          }
        })
      })
    },
    //班组
    getTeam(){
      this.$api.Custom.getTeam().then(res=>{
        let team = res && res.team ? res.team:'';  //班组
        let shift = res && res.shift ? res.shift:'';  //班次
        this.currentTeam = team + shift;
      })
    },
    //订单
    getOrder(){
      this.$api.Custom.getOrder().then(res=>{
        if(!res) return;
        this.orderData = {
          categories:res.categories,
          values:this.transValues(res.values)
        }
        let allOrderIndex = res.values.findIndex(d=>d.key==='all')
        if(allOrderIndex === -1) return;
        let allOrderObject = res.values[allOrderIndex];
        this.orderPieData = allOrderObject.data.map((d,i)=>{
          return {
            value:d,
            name:this.orderData.categories[i]
          }
        })
      })
    },
    //质量检测数据
    getQuality(){
      this.$api.Custom.getQuality().then(res=>{
        Object.keys(res).map(key=>{
          let currentData = res[key];
          if(!currentData){
            this.qualityData[key].data = null;
            return;
          }
          this.qualityData[key].data = {
            categories:currentData.categories,
            values:this.transValues(currentData.values)
          }
        })
      })
    },
    //设备运行状态
    getEquipData(){
      this.$api.Custom.getEquipData().then(res=>{
        this.equipData = res;
      })
    },
    transValues(values=[]){
      let obj = {};
      values.forEach(d=>{
        obj[d.name] = d.data
      })
      return obj;
    }
  },
  beforeDestroy() {

  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  padding: 10px;
  .content-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .left-item,
  .right-item {
    border: 1px solid #797979;
    border-radius: 10px;
    height: 32%;
    padding-top: 10px;
  }
  .middle-item {
    border: 1px solid #797979;
    border-radius: 10px;
  }
  .middle-top {
    line-height: 50px;
    margin-bottom: 20px;
    padding-left: 10px;
  }
  .middle-center {
    height: calc(100% - 70px);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }
  .head-title {
    padding-left: 6px;
    font-weight: bold;
    line-height: 20px;
  }
  .line-content {
    height: calc(100% - 20px);
  }
  .order-chart{
    height: calc(50% - 10px);
  }
}
</style>
